<template>
  <h1>(计算属性)</h1>
  <div>
    姓:
    <input type="text" v-model="data.firstName" />
  </div>
  <div>
    名:
    <input type="text" v-model="data.lastName" />
  </div>
  <div>
    全名:
    <input type="text" v-model="name" />
  </div>
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  setup () {
    const data = reactive({
      firstName: '张',
      lastName: '三',
    })
    // 情况一:计算属性(读)
    // const name = computed(() => {
    //   return data.firstName + '-' + data.lastName
    // })

    // 情况二:计算属性(读写)
    const name = computed({
      get () {
        return data.firstName + '-' + data.lastName
      },
      set (value) {
        console.log(value);
        const arr = value.split('-')
        data.firstName = arr[0]
        data.lastName = arr[1]
      }
    })
    return {
      data,
      name
    }
  }
}
</script>